<template>
  <div class="card">
    <div class="title">
      <el-page-header content="茶种信息修改" @back="goBack" />
    </div>
    <div class="body">
      <div class="base-message">
        <el-form label-width="150px" :model="formData">
          <el-form-item label="品种名称（中文名）">
            <el-input
              v-model="formData.chineseName"
              placeholder="请输入中文名！"
              style="width: 280px"
            />
          </el-form-item>
          <el-form-item label="品种名称（拉丁名）">
            <el-input
              v-model="formData.latinName"
              placeholder="请输入拉丁名！"
              style="width: 280px"
            />
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model="formData.grade" placeholder="请选择">
              <el-option
                v-for="item in gradeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="种植时间">
            <el-date-picker
              v-model="formData.growYear"
              value-format="yyyy-MM-dd"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            />
          </el-form-item>
          <!-- <el-form-item label="是否珍贵品种">
            <el-radio
              v-model="formData.rareVariety"
              :label="1"
              border
            >是</el-radio>
            <el-radio
              v-model="formData.rareVariety"
              :label="0"
              border
            >否</el-radio>
          </el-form-item> -->
          <el-form-item label="来源地">
            <v-distpicker
              :province="formData.province"
              :city="formData.city"
              :area="formData.county"
              @selected="onSelected"
            />
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input
              v-model="formData.address"
              placeholder="请输入详细地址！"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="封面">
            <cover-upload
              :key-id.sync="formData.coverImgId"
              :img-url.sync="formData.coverPath"
            />
          </el-form-item>
          <el-form-item label="内容摘要">
            <el-input
              v-model="formData.abstractMessage"
              type="textarea"
              style="width: 500px"
              class="abstract"
              placeholder="请输入内容摘要"
            />
          </el-form-item>
          <el-form-item label="品种介绍">
            <div class="introduce">
              <!-- <tea-edit
                v-if="formData.varietyIntroduce"
                v-model="formData.varietyIntroduce"
              /> -->
              <t-editor v-model="formData.varietyIntroduce" />
            </div>
          </el-form-item>
          <template v-for="(item, index) in varietyList">
            <el-form-item
              :key="item.id"
              :label="item.imgType"
              label-position="center"
            >
              <div class="variety-item">
                <div class="variety-item-title" />
                <div class="variety-item-upload">
                  <!-- <upload-list
                    :updateList.sync="nowList[index]"
                    :imgType="item.id"
                    :imgsId.sync="formData.imgIds[index]"
                  /> -->
                  <tea-upload
                    :edit-list.sync="nowList[index]"
                    :key-id.sync="formData.imgIds[index]"
                    :img-type.sync="item.id"
                    :ids.sync="formData.ids"
                  />
                </div>
              </div>
            </el-form-item>
          </template>
          <el-form-item label="备注信息（添加）">
            <back-message :list.sync="formData.exTeaMessageParams" />
          </el-form-item>
        </el-form>
      </div>
      <el-button class="update-remarks" type="danger" @click="updateRemarks"
        >点击修改备注信息</el-button
      >
      <el-button class="add-message" type="danger" @click="updateMessage"
        >点击修改茶种信息</el-button
      >
    </div>
  </div>
</template>

<script>
import { province } from "@/datas/index";
import SelectArea from "../components/select-area";
import TEditor from "../components/tea-edit.vue";
import {
  findAllVariety,
  updateMessage,
  getUpdateMessage,
  getUpdateRemarks,
  updateRemarks,
} from "@/api/tea-manager";
// import UploadList from "@components/common/upload-list";
import TeaUpload from "@/components/common/tea-upload.vue";
import CoverUpload from "@components/common/upload";
// import TeaEdit from "../components/t-editor.vue";
import BackMessage from "../components/back-message.vue";
export default {
  components: {
    SelectArea,
    TeaUpload,
    // TeaEdit,
    CoverUpload,
    BackMessage,
    TEditor,
  },
  props: {
    updateId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      varietyList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      gradeList: [
        {
          value: "国家级",
          label: "国家级",
        },
        {
          value: "省级",
          label: "省级",
        },
      ],
      province,
      formData: {
        ids: [],
        imgIds: [],
        exTeaMessageParams: [],
      },
      nowList: [],
    };
  },
  created() {
    findAllVariety().then((res) => {
      console.log(res);
      const varietyList = res.data.data;
      this.varietyList = varietyList;
      const _varietyList = varietyList.map((item) => item.imgType);
      getUpdateMessage({
        id: this.updateId,
      })
        .then((res) => {
          console.log(res);
          const formData = { ...res.data.data };
          const { teaImgList } = formData;
          delete formData.teaImgList;
          const _teaImgList = [];
          const nowList = [];
          teaImgList.forEach((item) => {
            const index = _varietyList.indexOf(item.imgType);
            if (index !== -1) {
              !_teaImgList[index] && (_teaImgList[index] = item.keyId);
              if (!nowList[index]) nowList[index] = [];
              nowList[index].push(item);
            }
          });
          console.log(_teaImgList);
          formData.imgIds = _teaImgList;
          formData.exTeaMessageParams = [];
          this.nowList = nowList;
          this.formData = formData;
          getUpdateRemarks({ id: this.updateId }).then((res) => {
            console.log(res);
            this.formData.exTeaMessageParams = res.data.data;
          });
        })
        .catch((err) => {});
    });
  },
  methods: {
    goBack() {
      this.formData = {};
      this.$emit("update:showIndex", 0);
      this.$emit("goBack");
    },
    updateRemarks() {
      updateRemarks({
        data: this.formData.exTeaMessageParams,
        teaId: this.formData.id,
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success("修改备注信息成功");
            return;
          }
          this.$message.error(res.data.message);
        })
        .catch(() => {
          this.$message.error("修改备注信息失败");
        });
    },
    updateMessage() {
      console.log(this.formData);
      // this.formData.
      updateMessage(this.formData)
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error(res.data.code.message);
            return;
          }
          this.goBack();
          this.$message.success("修改茶种信息成功");
        })
        .catch(() => {
          this.$message.error("修改茶种信息失败");
        });
    },
    onSelected(val) {
      console.log(val);
      const { province, city, area } = val;
      this.formData.province = province.value;
      this.formData.city = city.value;
      this.formData.county = area.value;
      console.log(val.city.code); //  打印出城市的code
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  /*background:rgba(255,255,255,1);*/
  border: 1px solid rgba(211, 211, 211, 1);
  .title {
    width: 100%;
    height: 48px;
    background: rgba(241, 245, 249, 1);
    border: 1px solid rgba(211, 211, 211, 1);
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(27, 33, 63, 1);
    display: flex;
    align-items: center;
    padding-left: 32px;
  }
  .body {
    width: 100%;
    padding: 60px;
    .variety-item {
      display: flex;
      .variety-item-title {
        // display: flex;
        // align-items: center;
        // margin-right: 30px;
      }
    }
    .base-message {
    }
    .introduce {
      width: 70%;
    }
  }
}
.add-message {
  position: fixed;
  left: 240px;
  bottom: 120px;
}
.update-remarks {
  position: fixed;
  left: 240px;
  bottom: 180px;
  margin-left: 10px;
}
::v-deep .abstract textarea {
  height: 150px !important;
}
</style>
